<style>
    .alert-info {
        background-color: #d9edf7 !important;
        border-color: #bce8f1 !important;
        color: #31708f !important;
    }
</style>
<div ng-controller="addAds">
    <div class="modal fade" id="addNewAdImg">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加图片信息</h4>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-horizontal" name="addImgForm" ng-submit="processImgForm(addImgForm.$valid)" novalidate>
                        <div class="form-group">
                            <label class="control-label col-sm-2">图片链接</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control input-sm" name="contentlink" ng-pattern="/[a-zA-z]+://[^\s]*/" ng-model="formData.contentItem.link" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentlink.$invalid && !addImgForm.contentlink.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正确的链接地址</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">宽(px)</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control input-sm" name="contentwidth" ng-pattern="/^[1-9]\d*$/" ng-model="formData.contentItem.width" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentwidth.$invalid && !addImgForm.contentwidth.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正整数</label>
                            </div>
                            <label class="control-label col-sm-2">高(px)</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control input-sm" name="contentheight" ng-pattern="/^[1-9]\d*$/" ng-model="formData.contentItem.height" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentheight.$invalid && !addImgForm.contentheight.$pristine"><i class="fa fa-times-circle-o"></i> 请输入正整数</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">打开方式</label>
                            <div class="col-sm-3">
                                <select class="form-control" ng-model="formData.contentItem.target" ng-options="x.name as x.value for x in selectTarget" ng-change="changeOption()"></select>
                                <!--<select name="" id="" class="form-control" ng-model="formData.contentItem.target" required>-->
                                    <!--<option value="_blank" selected>_blank</option>-->
                                    <!--<option value="_self">_self</option>-->
                                <!--</select>-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">描述</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control input-sm" name="contentdiscription" ng-minlength="5" ng-maxlength="30" ng-model="formData.contentItem.discription" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="addImgForm.contentdiscription.$invalid && !addImgForm.contentdiscription.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">上传图片</label>
                            <div class="col-sm-8">
                                <input type="file" name="uploadify" id="uploadAdsImg" />
                                <input type="hidden" class="form-control input-sm" name="contentsimg" id="contentSimg" ng-minlength="5" ng-model="formData.contentItem.sImg" required/>
                                <img src="" alt="" width="120" height="120" class="img-thumbnail" id="myImg">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" ng-disabled="addImgForm.$invalid">添加</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-default">
                <div class="box-header">
                    <div class="alert alert-success alert-dismissable fade in hide" role="alert" id="addSuccess">
                        <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                        <p><i class="icon fa fa-check"></i> <strong>恭喜！</strong>广告添加成功</p>
                    </div>
                    <p class="myInfoBox bg-warning text-warning"><i class="icon fa fa-warning"></i>
                        修改广告信息，广告类型不可修改
                    </p>
                </div>
                <div class="box-body">
                    <form role="form" class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
                        <div class="form-group">
                            <label class="control-label col-sm-3">广告标识</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control input-sm" name="mkey" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_]{3,14}$/" ng-model="formData.mkey" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="myForm.mkey.$invalid && !myForm.mkey.$pristine"><i class="fa fa-times-circle-o"></i> 4-15个英文字符</label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3">广告标题</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control input-sm" name="title" ng-minlength="3" ng-maxlength="30" ng-model="formData.title" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="myForm.title.$invalid && !myForm.title.$pristine"><i class="fa fa-times-circle-o"></i> 3-30个非特殊字符</label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3">显示</label>
                            <div class="radio col-sm-4">
                                <label>
                                    <input type="radio" checked class="mini" value="1" name="state" ng-model="formData.state"/>是&nbsp;
                                </label>
                                <label>
                                    <input type="radio" class="mini" name="state" value="2" ng-model="formData.state"/>否
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3">广告类别</label>
                            <div class="col-sm-2">
                                <select name="" id="" class="form-control" ng-model="formData.category" required>
                                    <option value="default" selected>默认分类</option>
                                    <option value="friendlink">友情链接</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">广告内容</label>
                            <div class="col-sm-8">
                                <!-- Custom Tabs -->
                                <div class="nav-tabs-custom">
                                    <ul class="nav nav-tabs">
                                        <li class="dropdown">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" >
                                                <span id="adsType">选择广告类别</span> <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li role="presentation" id="txtAdsType"><a role="menuitem" dropValue="0" tabindex="-1" data-toggle="tab" href="#tab_1">文字</a></li>
                                                <li role="presentation" id="imgAdsType"><a role="menuitem" dropValue="1" tabindex="-1" data-toggle="tab" href="#tab_2">图片</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade in active" id="tab_1">
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">文字内容</label>
                                                <div class="col-sm-4">
                                                    <input type="text" class="form-control input-sm" name="contenttitle"  ng-model="formData.content.title" />
                                                    <label for="inputError" class="control-label text-danger" ng-show="myForm.contenttitle.$invalid && !myForm.contenttitle.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">文字链接</label>
                                                <div class="col-sm-4">
                                                    <input type="text" class="form-control input-sm" name="contentlink"  ng-model="formData.content.link" />
                                                    <label for="inputError" class="control-label text-danger" ng-show="myForm.contentlink.$invalid && !myForm.contentlink.$pristine"><i class="fa fa-times-circle-o"></i> 5-30个非特殊字符</label>
                                                </div>
                                            </div>
                                        </div><!-- /.tab-pane -->
                                        <div class="tab-pane fade" id="tab_2">
                                            <div class="form-group">
                                                <!--<label class="control-label col-sm-3">添加图片</label>-->
                                                <div class="col-sm-4">
                                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addNewAdImg">添加图片</button>
                                                </div>
                                            </div>
                                            <div class="box box-primary">
                                                <div class="box-header with-border">
                                                    <h3 class="box-title">图片列表</h3>
                                                    <span class="label label-primary pull-right"><i class="fa fa-fw fa-picture-o"></i></span>
                                                </div><!-- /.box-header -->
                                                <div class="box-body">
                                                    <p class="text-warning"><i class="fa fa-fw fa-info-circle"></i>点击上传添加广告图片，单张图默认不轮播，多图为轮播显示。最多4张图</p>
                                                    <div id="imgInfolist">

                                                    </div>
                                                </div><!-- /.box-body -->
                                            </div>
                                        </div><!-- /.tab-pane -->
                                    </div><!-- /.tab-content -->
                                </div><!-- nav-tabs-custom -->
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
